<!DOCTYPE html>
<!-- saved from url=(0038)http://jpress.io/article/category/blog -->
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<div id="translate-button" style="background-color: #ffffff;"></div>
<head th:replace="/default/_layout :: head(~{::title})">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>title</title>
    <!-- Styles -->
    <link href="css/page.min.css" th:href="@{/default/css/page.min.css}" rel="stylesheet">
    <link href="css/style.css" th:href="@{/default/css/style.css}" rel="stylesheet">
    <link href="css/new.min.css" th:href="@{/default/css/new.min.css}" rel="stylesheet">
    <link href="css/jp.css" th:href="@{/default/css/jp.css}" rel="stylesheet">
    <link href="css/notification.css" th:href="@{/default/css/notification.css}" rel="stylesheet">
    <!-- /.Styles-->
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="#">
    <link rel="icon" href="#">
    <script>
        var web = {cpath:''}
        //        window.addEventListener('touchmove', func, { passive: false });
    </script>
</head>
<body>
<!-- menu -->
<nav class="navbar navbar-expand-lg navbar-stick-dark navbar-light" data-navbar="sticky" th:replace="/default/_layout :: menu(1)" >
    <div class="container">
        <div class="navbar-left">
            <button class="navbar-toggler" type="button">☰</button>
            <a class="navbar-brand" href="http://jpress.io/">
                <img class="logo-dark" src="#" alt="logo">
                <img class="logo-light" src="#" alt="logo">
            </a>
        </div>
        <section class="navbar-mobile">
            <ul class="nav-navbar nav ml-auto">
                <li class="nav-item"><a class="nav-link" th:classappend="${n==1} ? 'active'" href="#">首页</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==2} ? 'active'" href="#">社区</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==3} ? 'active'" href="#">案例</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==4} ? 'active'" href="#">模板</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==5} ? 'active'" href="#">企业版</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==6} ? 'active'" href="#">插件</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==7} ? 'active'" href="#">小程序</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==8} ? 'active'" href="#">文档</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==9} ? 'active'" href="#">博客</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==10}? 'active'" href="#">加入VIP</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==11}? 'active'" href="#">官方服务</a></li>
            </ul>
            <div class="nav-download d-inline-flex">
                <a class="nav-link" href="../ucenter/user_login.html" th:href="@{/login}">登录</a>
                <a class="btn" href="../ucenter/user_register.html" th:href="@{/regist}">注册</a>
            </div>
        </section>
    </div>
</nav>
<!-- /.menu -->


<!-- Header -->
<header class="header text-center text-white" th:replace="/default/_layout :: header" style="background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);">
    <div class="container">

        <div class="row">
            <div class="col-md-8 mx-auto">
                <h1>博客</h1>
                <p class="lead-2 opacity-90 mt-6">分享历程，记录经验，积累点滴，实现自我...</p>

            </div>
        </div>

    </div>
</header>
<!-- /.header -->

<!-- Main -->
<main class="main-content">
    <div class="section section-white bg-gray">
        <div class="container">
            <div class="row">


                <div class="col-md-8 col-xl-9">
                    <div class="row gap-y">
                        <div class="card mb-30"style="width:100%" th:each = "Article : ${articles}">
                            <div class="row align-items-center h-full">
                                <div class="col-12 col-md-4">
                                    <a href="#"><img src="#" alt="..."></a>
                                </div>

                                <div class="col-12 col-md-8" >
                                    <div class="card-block">
                                        <h4 class="card-title"><a th:href="'/article?articleid='+${Article.id}" th:text = "${Article.title}"> title</a></h4>
                                        <p class="card-text" th:text = "${Article.summary}">summary </p>
                                    </div>
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



                <div class="col-md-4 col-xl-3">
                    <!-- SideBar -->
                    <div class="sidebar px-4 py-md-0" th:replace="/default/_layout :: SideBar">
                        <div>
                            <h6 class="sidebar-title">文章搜索</h6>
                            <form id="searchform" action="#" class="input-group" method="GET" target="_blank">
                                <input type="search" class="form-control" name="keyword" placeholder="输入关键字" autocomplete="off">
                                <div class="input-group-addon">
                                    <span class="input-group-text"><i class="ti-search"></i></span>
                                </div>
                            </form>
                            <hr>
                        </div>

                        <h6 class="sidebar-title">分类</h6>
                        <div class="row link-color-default fs-14 lh-24">
                            <div class="col-6" th:each = "ArticleCategory : ${categories}"><a href="#" th:text = "${ArticleCategory.title}">测试分类</a></div>
                        </div>
                        <hr>
                        <h6 class="sidebar-title">热门文章</h6>
                        <hr>
                        <h6 class="sidebar-title">Tags</h6>
                        <div class="gap-multiline-items-1">
                            <a class="badge badge-secondary" th:each = "ArticleCategory : ${tags}" th:text = "${ArticleCategory.title}" href="#">测试标签</a>
                        </div>
                        <hr>
                        <h6 class="sidebar-title">关于</h6>
                        <p>关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于</p>

                    </div>
                    <!-- SideBar -->
                </div>
            </div>
        </div>
    </div>
</main>
<!-- ./Main -->
<!-- Footer -->
<footer class="footer py-7" th:replace="/default/_layout :: footer"> </footer>
<!-- /.footer -->


<!-- Scripts -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar"><div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader"><div class="pswp__preloader__icn">
                    <div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div>
                    </div>
                </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
            <div class="pswp__caption"><div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>
<th:block th:replace="/default/_layout :: scripts">

</th:block>
</body>
</html>